この手順では、新しい Visual Studio アプリケーションを作成し、適切な参照をプロジェクトに追加します。さらに、C1Barcode コントロールを作成するための XAML マークアップを追加します。
- 新しい Windows ストアアプリケーションを作成します。
- ［ファイル］、［新規作成］、［プロジェクト］を順に選択します。［新しいプロジェクト］ダイアログボックスが開きます。
- ［Visual C#］の［テンプレート］リストで［ストアアプリ］を選択します。テンプレートリストで、［新しいアプリケーション（ユニバーサルアプリケーション）］を選択します。
- アプリケーションに名前を付けて、［OK］を選択します。新しいアプリケーションが開きます。
- ソリューションエクスプローラーで参照設定フォルダを右クリックし、［追加］→［新しい参照］を選択します。次の参照を探して追加します。
- C1.Xaml.dll
- C1.Xaml.BarCode.dll
- アプリケーションに「Resources」というフォルダを作成し、そこに1つの画像ファイルを追加します。この例では、「c1logo.png」という画像を追加しています。
-
Resources フォルダを右クリックし、［追加］、［既存の項目］を順に選択します。［既存項目の追加］ダイアログボックスが開きます。
- アプリケーションに追加する画像ファイルを見つけます。
- ファイルを選択し、［OK］をクリックします。ファイルが Resources フォルダに追加されます。
- アプリケーションでファイルを使用できるように、アプリケーションをリビルドします。
- MainPage.xaml ファイルを開き、開始タグ <Page> を見つけます。このタグには、必要な名前空間が含まれています。次のマークアップになるように、タグを編集します。
| XAML |
コードのコピー
|
<Page
x:Class="BarCodeQS.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BarCodeQS"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:c1="using:C1.Xaml.BarCode"
xmlns:Xaml="using:C1.Xaml"
xmlns:BarCode="using:C1.BarCode"
mc:Ignorable="d">
|
次の名前空間がタグに追加されます。
- xmlns:c1="using:C1.Xaml.BarCode"
- xmlns:Xaml="using:C1.Xaml"
- xmlns:BarCode="using:C1.BarCode"
- ページの <Grid></Grid> タグの間にカーソルを置きます。次の XAML マークアップを <Grid></Grid> タグの間に追加して、グリッドのリソースを設定します。
| XAML |
コードのコピー
|
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Left" Width="756">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="26.667"></Setter>
</Style>
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="26.667"></Setter>
</Style>
<Style TargetType="ComboBox">
<Setter Property="FontSize" Value="26.667"></Setter>
</Style>
</Grid.Resources>
|
- 次のマークアップは、４つの TextBlock コントロールと１つの ComboBox コントロールを追加します。アプリケーションを実行すると、表示する BarCode コントロールのタイプを変更することができます。
| XAML |
コードのコピー
|
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="10,68,0,617"
TextWrapping="Wrap" Text="CodeType:" VerticalAlignment="Center"/>
<TextBox x:Name="text" Text="{Binding Text, ElementName=barcode, UpdateSourceTrigger=PropertyChanged, FallbackValue='', Mode=TwoWay}"
HorizontalAlignment="Left" Margin="157,172,0,0" TextWrapping="Wrap" VerticalAlignment="Top" TextChanged="text_TextChanged" Width="400" Height="57" />
<ComboBox x:Name="cbCodeType" HorizontalAlignment="Left" Margin="157,64,0,0"
VerticalAlignment="Top" Width="400" RenderTransformOrigin="0.66,-4.493" SelectionChanged="cbCodeType_SelectionChanged" Grid.ColumnSpan="3"/>
<TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="48,182,0,503"
TextWrapping="Wrap" Text="Text:" VerticalAlignment="Center"/>
<TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="41,421,0,0"
TextWrapping="Wrap" Text="Barcode:" VerticalAlignment="Top"/>
|
- C1BarCode コントロールのマークアップを最後の Grid タグの間に追加します。このマークアップは、アプリケーションの実行時に表示される BarCode のタイプを設定します。
| XAML |
コードのコピー
|
<c1:C1BarCode x:Name="barcode" HorizontalAlignment="Left" Margin="258,373,0,0" VerticalAlignment="Top" CodeType="QRCode" CaptionPosition="Below" Text=" https://developer.mescius.jp/">
<c1:C1BarCode.QRCodeOptions>
<BarCode:QRCodeOptions ErrorLevel="High"/>
</c1:C1BarCode.QRCodeOptions>
</c1:C1BarCode>
|
- 次に、以下のマークアップを使用して、手順3で追加した画像ファイルを追加します。
| XAML |
コードのコピー
|
<Image Source="ms-appx:/BarCodeQS/Resources/c1logo1.png" x:Name="image" Width="70" Height="70" Grid.Column="1" Margin="82,316,0,334" />
|
これで 、このクイックスタートの手順１は完了です。この手順で、新しいアプリケーションを作成し、参照を追加し、XAMLマークアップを使用してアプリケーションを設定しました。次の手順では、コードをアプリケーションに追加します。
関連トピック